<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>${objInmueble.objUnidadNegocio.descripcion} - sudoctor.com</title>

<style>
html, body {
border:0;
margin:0;
font-family:Verdana, 'Times New Roman', sans-serif;
color: #FFFFFF;
width:100%;
}

html{
min-width:1096px;
height: 100%;
}


body{
background-image: -webkit-gradient(
	linear,
	left top,
	right bottom,
	color-stop(0, #589A95),
	color-stop(1, #91D3E4)
);
background-image: -o-linear-gradient(right bottom, #589A95 0%, #91D3E4 100%);
background-image: -moz-linear-gradient(right bottom, #589A95 0%, #91D3E4 100%);
background-image: -webkit-linear-gradient(right bottom, #589A95 0%, #91D3E4 100%);
background-image: -ms-linear-gradient(right bottom, #589A95 0%, #91D3E4 100%);
background-image: linear-gradient(to right bottom, #589A95 0%, #91D3E4 100%);
background-repeat:no-repeat;
background-attachment: fixed; /**Para que se expanda el gradiente en todo el body */
}

.class-spanComun{
	font-family:Verdana, Geneva, sans-serif;
	font-size:150%;
}

.class-spanPalabraSu{
	color: #D8D8D8;
	font-weight:bold;
}

.class-spanPalabraDoctor{
	color: #FFFFFF;
	font-weight:bold;
}

.gm-style-iw{
	color:black;
}

</style>

<script type="text/javascript" language="javascript" src="<c:url value='/js/lib/jquery-1.11.1.min.js'/>"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<script type="text/javascript">
function initialize() {
	  var myLatlng = new google.maps.LatLng(${objInmueble.latitud},${objInmueble.longitud});
	  var mapOptions = {
	    zoom: 15,
	    center: myLatlng
	  };

	  var map = new google.maps.Map(document.getElementById('mapa'), mapOptions);

	  var contentString = '<div id="content">'+
			'${objInmueble.objUnidadNegocio.descripcion}'+
	      '</div>';

	  var infowindow = new google.maps.InfoWindow({
	      content: contentString,
	      maxWidth: 200
	  });

	  var marker = new google.maps.Marker({
	      position: myLatlng,
	      map: map,
	      title: '${objInmueble.objUnidadNegocio.descripcion}'
	  });
	  google.maps.event.addListener(marker, 'click', function() {
	    infowindow.open(map,marker);
	  });
	}

	google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>

<div id="header" style="position:relative;height:100px;border-bottom: solid 1px;">
		<div id="divLogo" style="position:absolute;top:15%;left:20px;">
			<img id="imgLogo" width="23%" align="middle" src="${urlImagenes}images/logosudoctor.latido1.png">
		</div>

		<div style="position:absolute;width:250px;top:35%;left:100px;">
				<span class="class-spanComun class-spanPalabraSu">SU</span>&nbsp;<span class="class-spanComun class-spanPalabraDoctor">DOCTOR</span>
		</div>

</div>


	<div id="contenedor" style="width:90%;min-height:500px;height:100%;margin-top:3%;margin-left:2%;">

		<div style="position:relative;margin-top:5px;margin-left:5px;margin-right:5px;margin-bottom:15px;">
			
				<div id="tab1" style="position:relative;min-height:500px;">
				
				<div style="width:40%;position:relative;font-size:90%;">

						<div style="font-size:130%;font-family:Verdana, 'Times New Roman', sans-serif;border-bottom: solid 1px;">
							${objInmueble.objUnidadNegocio.descripcion}
						</div>
						<div style="padding-left: 10px;margin-top:10px;">
							<label style="font-weight:bold;">Calle:</label> ${objInmueble.calle} ${objInmueble.numeroExterior} <br/>
							<label style="font-weight:bold;">Colonia:</label> ${objInmueble.coloniaDescripcion} <br/>
							<label style="font-weight:bold;">Municipio:</label> ${objInmueble.municipio.mun_descripcion} <br/>
							<label style="font-weight:bold;">Estado:</label> ${objInmueble.estado.est_descripcion}
						</div>
						
						<c:if test="${lstHorarios.size() > 0}">
							<div style="font-weight:bold;padding-left: 10px;margin-top:20px;">
								Horario:<br/>
								
								<c:set var="dia" value="0"></c:set>
								
								<c:forEach var="objHorario" items="${lstHorarios}" varStatus="indice">
								
								<c:choose>
								<c:when test='${indice.index > 0 && dia == objHorario.objDia.id}'>
											y
								</c:when>
								</c:choose>	
																
									<c:choose>
										<c:when test='${dia != objHorario.objDia.id}'>
											<br/>${objHorario.objDia.descripcion}<br/>
										</c:when>
									</c:choose>
								
									 ${objHorario.horaInicio}-${objHorario.horaFinal}
									 
									 
									
									<c:set var="dia" value="${objHorario.objDia.id}"></c:set>
									
								</c:forEach>
							</div>
						</c:if>
						<c:if test="${lstTelefonos.size() > 0}">
							<div style="padding-left: 10px;margin-top:10px;">
								<label style="font-weight:bold;">Telefono(s):</label>
								<br/>
								<br/>
								<c:forEach var="objTelefono" items="${lstTelefonos}" varStatus="indice">
									${objTelefono.telefono}<br/>
								</c:forEach>
							</div>
						</c:if>
						
						<c:if test="${objInmueble.lstInmuebleTipoInmueble.size() > 0}">
								<div style="padding-left: 10px;font-weight:bold;margin-top:20px;">
									Otros servicios:
								</div>							
		
								<div id="contenedor-tipo-servicio" style="width:100%;height:70px;position:relative;">
										<div id="ajuste-derecha" style="width:30%;height: 100%;position:absolute;top:15%;left:0;">
											<c:forEach var="objetoServicios" items="${objInmueble.lstInmuebleTipoInmueble}">
												
												<c:choose>
													<c:when test="${objetoServicios.objTipoInmueble.tin_id == 4}">
														<div style="min-width:48px;min-height:48px;float:right;position:relative;margin-left:5px;width:48px;height:48px;border: 2px solid #FFFFFF;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;">
															<img class="imgConsultorio" title="Cuenta con laboratorio" alt="Cuenta con laboratorio" style="position:absolute;top:-12%;left:5%;" width="90%" src="${urlImagenes}images/laboratorio.png">
														</div>
													</c:when>
													<c:otherwise>
															<c:choose>
																	<c:when test="${objetoServicios.objTipoInmueble.tin_id == 3}">
																		<div style="min-width:48px;min-height:48px;float:right;position:relative;margin-left:5px;width:48px;height:48px;border: 2px solid #FFFFFF;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;">
																			<img class="imgConsultorio" title="Cuenta con consultorio" alt="Cuenta con consultorio" style="position:absolute;top:-12%;left:5%;" width="90%" src="${urlImagenes}images/consultorio.png">
																		</div>
																	</c:when>
																	<c:otherwise>
																		<c:choose>
																		<c:when test="${objetoServicios.objTipoInmueble.tin_id == 5}">
																			<div style="min-width:48px;min-height:48px;float:right;position:relative;margin-left:5px;width:48px;height:48px;border: 2px solid #FFFFFF;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;">
																				<img class="imgConsultorio" title="Cuenta con farmacia" alt="Cuenta con farmacia" style="position:absolute;top:-12%;left:5%;" width="90%" src="${urlImagenes}images/farmacia.png">
																			</div>
																		</c:when>
																		</c:choose>
																	</c:otherwise>
															</c:choose>
													</c:otherwise>
												</c:choose>
												
											</c:forEach>
										</div>
									</div>
						</c:if>
						
						<c:if test="${objeto.objUnidadNegocio.emergencia}">
							<div style="min-width:48px;min-height:48px;float:right;position:relative;margin-left:5px;width:48px;height:48px;border: 2px solid #FFFFFF;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;">
								<div title="Emergencias" style="color:#666666;font-size:120%;font-weight:bold;position:absolute;top:28%;left:12%;">EME</div>
							</div>
						</c:if>
						<c:if  test="${objeto.objUnidadNegocio.urgencia}">
							<div style="min-width:48px;min-height:48px;float:right;position:relative;margin-left:5px;width:48px;height:48px;border: 2px solid #FFFFFF;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;">
								<div title="Urgencias" style="color:#666666;font-size:120%;font-weight:bold;position:absolute;top:28%;left:12%;">URG</div>
							</div>
						</c:if>
						<c:if test="${objeto.objUnidadNegocio.hrs24}">
						<div style="min-width:48px;min-height:48px;float:right;position:relative;margin-left:5px;width:48px;height:48px;border: 2px solid #FFFFFF;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;">
							<div title="Abierto 24 horas" style="color:#666666;font-size:120%;font-weight:bold;position:absolute;top:28%;left:12%;">24H</div>
						</div>
						</c:if>
						
				</div>

					<div id="mapa" style="position:absolute;top:0;right:90px;width:450px;height:500px;border: solid 1px;">
						<img src="images/mapa.PNG">
					</div>
					
				</div>

	
			

			
		</div>
		
		

	
	</div>

	
	
</body>
</html>